<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Mapbox-Example</title>
  <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css">
  <link rel="stylesheet" href="./css/style.css">
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
</head>

<body>
  <div id="map"></div>

  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiaHVhbmdsaWkiLCJhIjoiY2ptbjJsZXRsMHBlNzNsbGIycTk3eWU0biJ9.Pj_8_ER8nD7UQSSeOg4JZA';
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v9',
      center: [-75.789, 41.874],
      zoom: 5,
      minZoom: 3
    });
    map.addControl(new mapboxgl.NavigationControl(), 'top-right');
    map.on('load', function () {
      map.addSource('overlay', {
        type: 'image',
        url: 'https://www.mapbox.com/mapbox-gl-js/assets/radar.gif',
        coordinates: [
          [-80.425, 46.437],
          [-71.516, 46.437],
          [-71.516, 37.936],
          [-80.425, 37.936]
        ]
      });
      map.addLayer({
        'id': 'overlay',
        'source': 'overlay',
        'type': 'raster',
        'paint': {
          'raster-opacity': 0.85
        }
      });
      map.addLayer({
        'id': 'wms-test-layer',
        'type': 'raster',
        'source': {
          'type': 'raster',
          'tiles': [
            'https://geodata.state.nj.us/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015'
          ],
          'tileSize': 256
        },
        'paint': {}
      });
      map.on('click', function (e) {
        var features = map.queryRenderedFeatures(e.point, {
          layers: ['overlay', 'wms-test-layer']
        });
      });
    });
  </script>
</body>

</html>